<template>
  <div class="forget">
    <header-v title="忘记密码"></header-v>
    <Content>
      <Row style="margin-bottom:50px" type="flex" justify="center">
        <Col :lg="{span:21,offset:3}" :xs="{span:24}">
          <Steps :current="current">
            <Step title="第一步" content="身份验证"></Step>
            <Step title="第二步" content="充值密码"></Step>
            <Step title="第三步" content="完成"></Step>
          </Steps>
          <!-- <Button type="primary" @click="next">Next step</Button> -->
        </Col>
      </Row>
      <Row v-if="current == 0" style="margin-bottom:50px" type="flex" justify="center">
        <Col :xs="{span:24}" :lg="8">
          <Form :model="formItemSf" label-position="right" :label-width="100">
            <FormItem label="邮箱">
              <Input v-model="formItemSf.input1">
              </Input>
            </FormItem>
            <FormItem label="验证码">
              <Input v-model="formItemSf.input2">
               </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="next(1)">确定</Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <Row v-if="current == 1" style="margin-bottom:50px" type="flex" justify="center">
        <Col :xs="{span:24}" :lg="8">
          <Form :model="formItemSf" label-position="right" :label-width="100">
            <FormItem label="新密码">
              <Input v-model="formItemSf.input3">
               </Input>
            </FormItem>
            <FormItem label="确认密码">
              <Input v-model="formItemSf.input4">
               </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="next(2)">确定</Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <Row v-if="current == 2" style="margin-bottom:50px" type="flex" justify="center">
        <Col :xs="{span:24}" :lg="8">
          <Card :bordered="false" style="background:#5b84ac;text-align:center;height:260px;line-height:120px">
            <Icon type="md-checkmark-circle-outline" color="#fff" size="100"/>
            <p style="color:#fff">设置成功快去登陆把</p>
          </Card>
        </Col>
      </Row>
    </Content>
    <footer-v></footer-v>
  </div>
</template>

<script>
import HeaderV from "../../components/Header.vue";
import FooterV from "../../components/Footer.vue";
export default {
  components: {
    HeaderV,
    FooterV
  },
  data() {
    return {
      current: 0,
      formItemSf: {
        input1: "",
        input2: "",
        input3: "",
        input4: ""
      }
    };
  },
  methods: {
    next(type) {
      if (type == 2) {
        this.current += 1;
        setTimeout(() => {
          this.$router.push({
            name: "login"
          });
        }, 3000);
      } else {
        this.current += 1;
      }
    }
  }
};
</script>

<style lang="less">
.forget {
  .ivu-layout-header {
    height: auto;
    line-height: initial;
    background: #fff;
    padding: 40px 0;
    img {
      vertical-align: middle;
      margin-right: 20px;
    }
    span {
      font-size: 30px;
      font-weight: bold;
    }
  }
  .ivu-layout-footer {
    p {
      text-align: center;
      font-weight: bold;
    }
  }
  .ivu-form-item-content {
    @media screen and (max-width: 500px) {
      background: yellow;
    }
  }
}
</style>